<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="商优选、购物、优惠">
    <meta name="keywords" content="电脑、手机、打折">
    <title>尚优选PC端项目</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 最外层包裹元素 -->
    <div id="wrapper">
        <!-- 头部开始 -->
        <header id="header">
            <!-- 头部上半部分 -->
            <div class="head_top">
                <!-- 版心 -->
                <div class="container clearfix">
                    <!-- 左边部分 -->
                    <div class="left">
                        <h5>
                            欢迎来到尚优选！ 请
                        </h5>
                        <p>
                            <a href="javascript:;">登录</a>
                            <a href="javascript:;">注册</a>
                        </p>
                    </div>
                    <!-- 右边部分 -->
                    <div class="right">
                        <ul>
                            <li><a href="javascript:;">我的尚优选</a></li>
                            <li><a href="javascript:;">我的订单</a></li>
                            <li><a href="javascript:;">尚优选会员</a></li>
                            <li><a href="javascript:;">我的购物车</a></li>
                            <li><a href="javascript:;">企业采购</a></li>
                            <li><a href="javascript:;">关注尚优选</a></li>
                            <li><a href="javascript:;">合作招商</a></li>
                            <li><a href="javascript:;">商家后台</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 头部下半部分 -->
            <div class="head_bottom">
                <!-- 版心 -->
                <div class="container clearfix">
                    <!-- 左边logo -->
                    <h1 class="fl">
                        <a href="javascript:;">
                            <img src="./images/logo.png" alt="尚优选">
                        </a>
                    </h1>
                    <!-- 右边搜索部分 -->
                    <div class="search fr">
                        <input class="fl" type="text" placeholder="请输入搜索内容">
                        <input class="fl" type="submit" value="搜索">
                    </div>
                </div>
            </div>
        </header>
        <!-- 头部结束 -->
        <!-- 分类导航开始 -->
        <nav class="classification">
            <!-- 版心元素 -->
            <div class="container">
                <ul class="clearfix">
                    <li><a href="javascript:;">全部商品分类</a></li>
                    <li><a href="javascript:;">服装城</a></li>
                    <li><a href="javascript:;">美妆馆</a></li>
                    <li><a href="javascript:;">尚优选超市</a></li>
                    <li><a href="javascript:;">全球购</a></li>
                    <li><a href="javascript:;">闪购</a></li>
                    <li><a href="javascript:;">团购</a></li>
                    <li><a href="javascript:;">有趣</a></li>
                    <li><a href="javascript:;">秒杀</a></li>
                </ul>
            </div>
        </nav>
        <!-- 分类导航结束 -->
        <!-- 内容区域开始 -->
        <div id="content">
            <div class="container">
                <!-- 导航路径开始 -->
                <div class="nav_path">
                    <ul class="clearfix">
                        <!-- <li><a href="javascript:;">手机、数码、通讯</a><em>/</em></li>
                        <li><a href="javascript:;">手机</a><em>/</em></li>
                        <li><a href="javascript:;">Apple苹果</a><em>/</em></li>
                        <li><a >iPhone 6s系</a></li> -->
                    </ul>
                </div>
                <!-- 导航路径结束 -->
                <!-- 中间区域开始 -->
                <div class="center clearfix">
                    <!-- 左侧放大镜区域开始 -->
                    <div class="left fl">
                        <!-- 上部分 -->
                        <div class="left_top fl clearfix">
                            <!-- 小图框 -->
                            <div class="small_pic fl">
                                <!-- 小图片 -->
                                <img src="images/s1.png" alt="">
                            </div>
                          
                        </div>
                        <!-- 下部分 -->
                        <div class="left_bottom fl">
                            <a href="javascript:;">< </a>
                            <div id="thumbnail_list">
                                <ul>
                                
                                </ul>
                            </div>
                            <a href="javascript:;">> </a>
                        </div>
                    
                    </div>
                    <!-- 左侧放大镜区域结束 -->
                    <!-- 右侧商品信息区域开始 -->
                    <div id="right">
                        <!-- 上部分商品详细信息区域 -->
                        <div id="top_information">
                           
                        </div>
                        <!-- 下部分商品详细参数区域 -->
                        <div id="bottom_parameters">
                            <!-- 商品参数信息 -->
                            <!-- 选择之后的结果区域 -->
                            <div class="choose">
                            </div>
                            <!-- 商品参数选择区域 -->
                            <div class="choose_wrap">
                            </div>
                            <!-- 加入购物车区域 -->
                            <div class="shopping_cart">
                                <div class="count">
                                    <input type="text">
                                    <a href="">-</a>
                                    <a href="">+</a>
                                </div>
                                <button>
                                    加入购物车
                                </button>
                            </div>
                        </div>

                    </div>
                    <!-- 右侧商品信息区域结束 -->
                </div>
                <!-- 中间区域结束 -->
                <!-- 商品关联产品开始 -->
                <div class="relatedproduct clearfix">
                    <!-- 侧边栏开始 -->
                    <aside class="fl">
                        <!-- 上面 -->
                        <div class="aside_top">
                            <h4 class="active">
                                相关分类
                            </h4>
                            <h4>
                                推荐品牌
                            </h4>
                        </div>
                        <!-- 下面 -->
                        <div class="aside_bottom">
                            <div class="active">
                                <ul class="good_list1">
                                    <li>手机</li>
                                    <li>手机壳</li>
                                    <li>内存卡</li>
                                    <li>iphone配件</li>
                                    <li>贴膜</li>
                                    <li>手机耳机</li>
                                    <li>移动电源</li>
                                    <li>平板电脑</li>
                                </ul>
                                <ul class="good_list2">
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>
                                            Apple苹果iPhone 6s (A1699)
                                        </span>
                                        <p>
                                            ¥6088.00
                                        </p>
                                        <div class="button">
                                            <a href="">
                                                加入购物车
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>
                                            Apple苹果iPhone 6s (A1699)
                                        </span>
                                        <p>
                                            ¥6088.00
                                        </p>
                                        <div class="button">
                                            <a href="">
                                                加入购物车
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>
                                            Apple苹果iPhone 6s (A1699)
                                        </span>
                                        <p>
                                            ¥6088.00
                                        </p>
                                        <div class="button">
                                            <a href="">
                                                加入购物车
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <img src="images/part01.png" alt="">
                                        <span>
                                            Apple苹果iPhone 6s (A1699)
                                        </span>
                                        <p>
                                            ¥6088.00
                                        </p>
                                        <div class="button">
                                            <a href="">
                                                加入购物车
                                            </a>
                                        </div>
                                    </li>
                                </ul>

                            </div>
                            <div>
                                推荐品牌
                            </div>

                        </div>

                    </aside>
                    <!-- 侧边栏结束 -->
                    <!-- 选择搭配开始 -->
                    <div class="choose_product fr clearfix">
                        <div class="top">
                            <h4>
                                选择搭配
                            </h4>
                        </div>
                        <div class="bottom">
                            <div class="left">
                                <img src="images/l-m01.png" alt="">
                                <p>¥<span>5299</span></p>
                                <i>+</i>
                            </div>
                            <ul>
                                <li>
                                    <img src="images/dp01.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <div>
                                        <input type="checkbox">
                                        <span>
                                            50
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <img src="images/dp02.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <div>
                                        <input type="checkbox">
                                        <span>
                                            50
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <img src="images/dp03.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <div>
                                        <input type="checkbox">
                                        <span>
                                            50
                                        </span>
                                    </div>
                                </li>
                                <li>
                                    <img src="images/dp04.png" alt="">
                                    <p>Feless费勒斯VR</p>
                                    <div>
                                        <input type="checkbox">
                                        <span>
                                            50
                                        </span>
                                    </div>
                                </li>
                            </ul>
                            <div class="all_choose fl">
                                <div>
                                    已购0件商品
                                </div>
                                <p>
                                    套餐价
                                </p>
                                <i>
                                    ¥5299
                                </i>
                                <button>
                                    加入购物车
                                </button>

                            </div>
                        </div>   
                    </div>
                    <!-- 选择搭配结束 -->
                    <!-- 商品详细信息开始 -->
                    <div class="moredetail fr">
                        <!-- 头部选项卡选择 -->
                            <ul class="list1">
                                <li class="active">
                                    <a href="javascript:;">商品介绍</a>
                                </li>
                                <li>
                                    <a href="javascript:;">规格包装</a>
                                </li>
                                <li>
                                    <a href="javascript:;">售后与保障</a>
                                </li>
                                <li>
                                    <a href="javascript:;">商品评价</a>
                                </li>
                                <li>
                                    <a href="javascript:;">手机社区</a>
                                </li>
                            </ul>
                            <!-- 详细内容 -->
                            <div class="active">
                                <p>
                                    分辨率：1920*1080(FHD)<br>
                                    后置摄像头：1200万像素<br>
                                    前置摄像头：500万像素<br>
                                    核 数：其他<br>
                                    频 率：以官网信息为准<br>
                                    品牌： Apple<br>
                                    商品名称：APPLEiPhone 6s Plus<br>
                                    商品编号：1861098<br>
                                    商品产地：中国大陆<br>
                                    商品毛重：0.51kg<br>
                                    热点：指纹识别，Apple Pay，金属机身，拍照神器<br>
                                    像素：1000-1600万品毛重：0.51kg<br>
                                    机身内存：64GB<br>
                                </p>
                                <ul>
                                    <li>
                                        <img src="images/intro01.png" alt="">
                                    </li>
                                    <li>
                                        <img src="images/intro02.png" alt="">
                                    </li>
                                    <li>
                                        <img src="images/intro03.png" alt="">
                                    </li>
                                </ul>
                            </div>
                            <div>规格包装</div>
                            <div>售后与保障</div>
                            <div>商品评价</div>
                            <div>手机社区</div>
                    </div>
                <!-- 商品详细信息结束 -->
                </div>
                <!-- 商品关联产品结束 -->
               
            </div>
        </div>
        <!-- 内容区域结束 -->
         <!-- 右侧边栏区域开始 -->
         <div class="right_aside aside_close">
            <!-- 按钮区域 -->
            <div class="btns btns_close">
            </div>
            <!-- 内容区域 -->
            <div class="content">

            </div>
            <!-- 侧边栏导航区域 -->
            <ul class="rightnav">
                <li>
                    <!-- 小图标 -->
                    <p>
                    </p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
                <li>
                    <!-- 小图标 -->
                    <p></p>
                    <i>尚选会员</i>
                </li>
            </ul>
        </div>
        <!-- 右侧边栏区域结束 -->
    </div>
    <script src="js/data.js"></script>
    <script src="js/index.js"></script>
</body>
</html>